<template>
  <view class="card tn-padding-sm tn-margin-sm">
<!--    -->
    <wenshuPdf style="position: absolute;top: -999999px" ref="PDF" :jsonData="jsonData" @upload="pdfUpload"></wenshuPdf>

    <inputForm v-model="form" ref="form" :list="list">
    </inputForm>

    <view class="tn-flex tn-flex-row-center tn-padding-xl">
      <tn-button v-if="$route.query.isClosed === '0'" @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
      </tn-button>
    </view>

    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">文书备注</p>
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn('文书备注')" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
          下载
        </tn-button>
      </view>
    </tn-modal>
  </view>
</template>

<script>
import inputForm from "@/components/inputForm.vue";
import {getExpExplain, saveExpExplain} from "@/api/lupeiwenshu";
import pdfMixins from "../js/mixins";
import wenshuPdf from "@/pages/roadCompensation/wenshubeizhu/wenshuPdf.vue";
import {toast} from "@/utils/common";
export default {
  components: {wenshuPdf, inputForm},
  mixins: [pdfMixins],
  data() {
    return {
      form: {},
      list: [
        {
          label: "立卷时间：",
          prop: "createTime",
          type: "date"
        }, {
          label: "立卷人：",
          prop: "createPerson",
        }, {
          label: "检查人：",
          prop: "checkPerson",
        }, {
          label: "说明：",
          prop: "explainMain",
          type: "textarea",
          // }, {
          //   label: "称谓：",
          //   prop: "expl",
        }
      ]
    }
  },
  methods: {
    submit() {
      const data = {
        "docId": this.$route.query.id,
        "expl": this.form.expl,
        "explainMain": this.form.explainMain,
        "createPerson": this.form.createPerson,
        "checkPerson": this.form.checkPerson,
        "createTime": this.form.createTime ? this.form.createTime : null
      }

      saveExpExplain(data).then(res => {
        this.show = false
        toast(res.msg)
        setTimeout(() => {
          uni.navigateBack();
        }, 1500)
      })
    },
    getDetails() {
      getExpExplain({
        docId: this.$route.query.id
      }).then(res => {
        this.jsonData =  this.form = res.data
      })
    },
  },
  mounted() {
    this.getDetails()
  },
}
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}
</style>
